<template>
  <div class="drawer">
    <el-button @click="btnClick" :style="`background: ${colors}`" class="btnColor" :icon="`${flag?'el-icon-setting':'el-icon-close'}`"></el-button>
    <el-drawer
      title="系统配置"
      :visible.sync="drawer"
      :direction="direction"
      @close="drawerClose"
      size="20%">
      <div class="flex">
        <span>主题色</span>
        <el-color-picker
          v-model="color"
          show-alpha
          :predefine="predefineColors"
          size="mini"
          @change="addColor(color)">
        </el-color-picker>
      </div>
      <div class="flex">
        <div class="Card" :style="`background: ${colors}`">
          <span>{{ this.colors }}</span>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>

export default {
  data() {
    return {
      drawer: false,
      flag: true,
      direction: 'rtl',
      color: 'rgba(255, 69, 0, 0.68)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
      ],
      colors: 'rgba(255, 69, 0, 0.68)'
    };
  },
  methods: {
    addColor(color){
      console.log(color)
      this.colors = color
    },
    btnClick(){
      this.drawer = true
      this.flag = !this.flag
    },
    drawerClose(){
      this.flag = !this.flag
    }
  }
}
</script>

<style lang="scss" scoped>
.Card {
  width: 80%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
}
.btnColor {
  color: #fff;
  font-weight: 700;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
.flex {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>